import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_module/common/base/base_page.dart';
import 'package:flutter_module/common/utils/toast_utils.dart';
import 'package:flutter_module/page/base/base_view.dart';
import 'package:flutter_module/style/colors.dart';

/// 合作服务商服务范围
class ServiceProviderEditServiceScopePage extends BaseStateFulWidget {
  ServiceProviderEditServiceScopePage({required this.params});

  final Map params;

  @override
  BaseState<StatefulWidget> buildState() {
    return _ServiceProviderEditServiceScopeState();
  }
}

class _ServiceProviderEditServiceScopeState
    extends BaseState<ServiceProviderEditServiceScopePage> with BasePage {
  int maxLine = 20;
  var _serviceScopeList = <String>[];

  var nameTECs = <TextEditingController>[];

  @override
  void initState() {
    super.initState();
    _serviceScopeList = widget.params["serviceScope"] ?? [];
  }

  @override
  String get appBarTitle => "服务范围";

  @override
  getActions() {
    return [
      new TextClickView(
        title: "保存",
        isTitleRight: true,
        rightClick: () {
          List<String> selectList = [];
          _serviceScopeList.forEach((element) {
            if (element.trim().length > 0) {
              selectList.add(element);
            }
          });
          Navigator.of(context).pop({
            'serviceScope': selectList,
          });
        },
      )
    ];
  }

  @override
  Widget createView(
    BuildContext context,
  ) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(left: 16, top: 13, right: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "请填写您的服务范围，为空则不展示",
            style: TextStyle(
                color: ThemeColors.text333,
                fontSize: 12,
                fontWeight: FontWeight.w500),
          ),
          Expanded(
            child: Container(
              child: ListView.builder(
                itemCount: _serviceScopeList.length + 1,
                itemBuilder: (BuildContext context, int index) {
                  if (index == _serviceScopeList.length) {
                    return _getAddButton();
                  } else {
                    return createCard(index);
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  _getAddButton() {
    return Container(
      height: 40,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: ThemeColors.grayE5E5E5, width: 1)),
      child: InkWell(
        onTap: () {
          if (_serviceScopeList.length >= maxLine) {
            ToastUtils().showText("至多可创建$maxLine条服务范围");
            return;
          } else {
            _serviceScopeList.add("");
          }
          setState(() => {});
        },
        child: Container(
          alignment: Alignment.center,
          child: Text(
            "新增",
            style: TextStyle(color: ThemeColors.text888, fontSize: 14),
          ),
        ),
      ),
    );
  }

  Widget createCard(int index) {
    var nameController = TextEditingController();
    nameTECs.add(nameController);
    return Container(
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(3),
          border: Border.all(color: ThemeColors.grayE5E5E5, width: 1)),
      child: Container(
          alignment: Alignment.centerLeft,
          height: 44.0,
          child: _getEditText(index)),
    );
  }

  _getEditText(int index) {
    return TextField(
      maxLength: 50,
      style: const TextStyle(color: Color(0xFF333333), fontSize: 12),
      controller: TextEditingController.fromValue(TextEditingValue(
          text: _serviceScopeList[index],
          selection: TextSelection.fromPosition(TextPosition(
              affinity: TextAffinity.downstream,
              offset: _serviceScopeList[index].length)))),
      decoration: InputDecoration(
          counterText: '',
          fillColor: Colors.white,
          filled: true,
          hintStyle: const TextStyle(color: Color(0xFF888888), fontSize: 12),
          hintText: '请输入服务范围',
          //不需要输入框下划线
          border: InputBorder.none,
          suffixIcon: GestureDetector(
            onTap: () {
              _serviceScopeList.removeAt(index);
              setState(() {});
            },
            child: Container(
              padding: EdgeInsets.only(right: 14),
              child: Image.asset(
                "images/service_provider/service_provider_del.png",
                width: 18,
                height: 18,
                fit: BoxFit.cover,
              ),
            ),
          ),
          suffixIconConstraints: BoxConstraints(maxWidth: 80)),
      onChanged: (v) {
        _serviceScopeList[index] = v;
        setState(() {});
      },
    );
  }
}
